<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- vue -->
    <script th:src="@{js/vue2.6.14.js(t=${time})}"></script>
    <!-- jquery -->
    <script th:src="@{js/jquery3.7.1.js(t=${time})}"></script>
    <!-- element-ui -->
    <link rel="stylesheet" th:href="@{css/element-ui-2.15.4.css(t=${time})}" >
    <script th:src="@{js/element-ui-2.15.4.js(t=${time})}"></script>
    <script th:src="@{js/common.js(t=${time})}"></script>
    <title>课程管理</title>
</head>
<body>
<div id="app">
    <div>
        <div style="margin: 20px">
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <el-input v-model="formdata.courseName" placeholder="请输入课程名称" clearable></el-input>
                    </div>
                </el-col>
                <el-col :span="4" v-show="requestDatas.userdata.role.name == '管理员'">
                    <div class="grid-content bg-purple">
                        <el-input v-model="formdata.teacher" placeholder="请输入教师姓名" clearable></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 20px;">
                <el-col>
                    <div style="display: flex;">
                        <div >
                            <el-button type="success" icon="el-icon-plus" @click="viewData.addDialogVisible = true">新增</el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="isDelete">删除</el-button>
                        </div>
                        <div style="margin-right: 0; margin-left: auto;">
                            <el-button @click="resetSearchForm">清空</el-button>
                            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div style="overflow-y: scroll; max-height: 400px;">
            <el-table @selection-change="tableSelectionChange" :data="requestDatas.tabledata" style="width: 100%;">
                <!-- 选择框 -->
<!--                v-if="requestDatas.userdata.role.name == '管理员' || requestDatas.userdata.role.name == '老师'"-->
                <el-table-column type="selection" width="55"></el-table-column>
                <!-- 数据列 -->
                <el-table-column prop="id" label="id" width="100"></el-table-column>
                <el-table-column prop="courseName" label="课程名称" width="130"></el-table-column>
                <el-table-column prop="teacher" label="教师" width="200"></el-table-column>
                <el-table-column prop="createTime" :formatter="listDateFormat" label="创建时间"></el-table-column>
                <el-table-column prop="updateTime" :formatter="listDateFormat" label="最后修改时间"></el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="getEditData(scope.row)"  type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="display: flex;">
            <div style="margin: 30px auto;">
                <el-pagination
                        background
                        :page-sizes="[10, 20, 50, 100]"
                        layout="sizes, prev, pager, next"
                        :total="formdata.total"
                        @size-change="changePageSize"
                        @current-change="changePageNumber">
                </el-pagination>
            </div>
        </div>
    </div>

    <!-- 新增 -->
    <el-dialog
            title="新增"
            :visible.sync="viewData.addDialogVisible"
            width="40%">
        <el-row :gutter="20" class="row-view">
            <el-col :span="4" :offset="3">
                <span class="form-title">课程名称</span>
            </el-col>
            <el-col :span="13">
                <el-input v-model="addFormData.courseName" placeholder="请输入课程名称" clearable></el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="row-view">
            <el-col :span="4" :offset="3">
                <span class="form-title">教师</span>
            </el-col>
            <el-col :span="13">
                <el-select v-model="addFormData.teacherId" placeholder="请选择授课教师">
                    <el-option v-for="item in requestDatas.teacherList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-col>
        </el-row>

        <div style="display: flex;">
            <el-button style="margin: 0 auto;" type="primary" @click="submitAddForm">保存</el-button>
        </div>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog
            title="修改"
            :visible.sync="viewData.editDialogVisible"
            width="40%">
        <el-row :gutter="20" class="row-view">
            <el-col :span="4" :offset="3">
                <span class="form-title">课程名称</span>
            </el-col>
            <el-col :span="13">
                <el-input v-model="editFormData.courseName" placeholder="请输入课程名称" clearable></el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="row-view">
            <el-col :span="4" :offset="3">
                <span class="form-title">教师</span>
            </el-col>
            <el-col :span="13">
                <el-select v-model="editFormData.teacherId" placeholder="请选择授课教师">
                    <el-option v-for="item in requestDatas.teacherList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="row-view">
            <el-col :span="4" :offset="3">
                <span class="form-title">创建时间</span>
            </el-col>
            <el-col :span="10">
                <el-input v-model="editFormData.createTime" disabled></el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="row-view">
            <el-col :span="4" :offset="3">
                <span class="form-title">修改时间</span>
            </el-col>
            <el-col :span="10">
                <el-input v-model="editFormData.updateTime" disabled></el-input>
            </el-col>
        </el-row>

        <div style="display: flex;">
            <el-button style="margin: 0 auto;" type="primary" @click="submitEditForm">保存</el-button>
        </div>
    </el-dialog>

    <!-- 删除 -->
    <!-- 重新登录对话框 -->
    <el-dialog
            title="是否删除"
            :visible.sync="viewData.deleteDialogVisible"
            width="30%">
        <span>是否删除数据？</span>
        <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="submitDeleteForm">删除</el-button>
                <el-button @click="viewData.deleteDialogVisible = false">取消</el-button>
            </span>
    </el-dialog>
</div>
</body>
<script>
    const vapp = new Vue({
        el: "#app",
        data: {
            // 获取的信息
            requestDatas: {
                // 用户信息
                userdata: {
                    user: {},
                    role: {}
                },
                // 表格数据
                tabledata: [],
                // 课程表
                courseList: [],
                // 教师信息
                teacherList: [],
            },
            // 列表表单数据
            formdata: {
                name: "",
                courseName: "",
                pageSize: 10,
                page: 1,
                total: 0
            },
            // 新增表单数据
            addFormData: {},
            // 修改表单数据
            editFormData: {},
            // 删除表单数据
            deleteFormData: {
                multipleSelection: []
            },
            // 页面操作数据
            viewData: {
                // 新增
                addDialogVisible: false,
                // 修改
                editDialogVisible: false,
                // 删除
                deleteDialogVisible: false
            }
        },
        created() {
            this.getUserInfo();
            this.search();
            this.getTeacherList();
        },
        mounted () {
            this.getUserInfo();
            this.search();
            this.getTeacherList();
        },
        methods: {
            // 获取当前用户数据
            getUserInfo() {
                let that = this;
                postRequest("/user/getUser", that.formdata, function (result) {
                    if (result.code != 0) {
                        that.viewData.loginDialogVisible = true;
                    } else {
                        that.requestDatas.userdata = result.data;
                    }
                });
            },
            // 日期格式化
            listDateFormat(row, column, cellValue, index) {
                if (column.property === 'createTime' || column.property === 'updateTime') {
                    return row[column.property].substring(0,10)
                }else{
                    return row[column.property]
                }
            },
            // 教师信息
            getTeacherList() {
                let that = this;
                postRequest("/user/getTeacherList", null, function (result) {
                    if (result.code != 0) {
                        that.$message({
                            message: result.msg,
                            type: 'error'
                        });
                        return;
                    }
                    that.requestDatas.teacherList = result.data;
                });
            },
            // 清空表单
            resetSearchForm() {
                this.formdata.teacher = "";
                this.formdata.courseName = "";
                this.search();
            },
            // 获取需要编辑的记录
            getEditData(scope) {
                let that = this;
                let param = {
                    id: scope.id
                };
                postRequest("/course/list", param, function (result) {
                    if (result.code != 0) {
                        that.$message({
                            message: result.msg,
                            type: 'error'
                        });
                        return;
                    }
                    that.editFormData = result.data.list[0];
                    that.viewData.editDialogVisible = true;
                });
            },
            tableSelectionChange(val) {
                if (val != null) {
                    let idArr = [];
                    for (let i =0; i < val.length; i++) {
                        idArr.push(val[i].id);
                    }
                    this.deleteFormData.multipleSelection = idArr;
                }
            },
            // 提交新增
            submitAddForm() {
                let that = this;
                postRequest("/course/add", this.addFormData, function (result) {
                    if (result.code == 0) {
                        that.$message({
                            message: result.msg,
                            type: 'success'
                        });
                        that.addFormData = {};
                        that.viewData.addDialogVisible = false;
                        that.search();
                    } else {
                        that.$message({
                            message: result.msg,
                            type: 'error'
                        });
                    }
                });
            },
            // 提交修改
            submitEditForm() {
                let that = this;
                postRequest("/course/edit", this.editFormData, function (result) {
                    if (result.code == 0) {
                        that.$message({
                            message: result.msg,
                            type: 'success'
                        });
                        that.editFormData = {};
                        that.viewData.editDialogVisible = false
                        that.search();
                    } else {
                        that.$message({
                            message: result.msg,
                            type: 'error'
                        });
                    }
                });
            },
            // 询问是否要提交删除
            isDelete() {
                let that = this;
                if(that.deleteFormData.multipleSelection == null || that.deleteFormData.multipleSelection.length == 0) {
                    that.$message({
                        message: "请先选择要删除的数据！",
                        type: 'warn'
                    });
                    return;
                }
                that.viewData.deleteDialogVisible = true;
            },
            // 提交删除请求
            submitDeleteForm() {
                let that = this;
                if(that.deleteFormData.multipleSelection == null || that.deleteFormData.multipleSelection.length == 0) {
                    that.$message({
                        message: "请先选择要删除的数据！",
                        type: 'warn'
                    });
                    return;
                }
                postRequest("/course/delete", that.deleteFormData.multipleSelection, function (result) {
                    if (result.code == 0) {
                        that.$message({
                            message: result.msg,
                            type: 'success'
                        });
                        that.search();
                    } else {
                        that.$message({
                            message: result.msg,
                            type: 'error'
                        });
                    }
                    that.viewData.deleteDialogVisible = false;
                });
            },
            // 更新页数
            changePageNumber(pageNum) {
                this.formdata.page = pageNum;
                this.search();
            },
            // 更新每页大小
            changePageSize(pageSize) {
                this.formdata.pageSize = pageSize;
                this.search();
            },
            // 查询列表
            search() {
                let that = this;
                postRequest("/course/list", that.formdata, function (result) {
                    if (result.code != 0) {
                        that.$message({
                            message: result.msg,
                            type: 'error'
                        });
                        return;
                    }
                    that.requestDatas.tabledata = result.data.list;
                    that.formdata.total = result.data.totalSize;
                });
            },
        }
    })

</script>

<style>
    body {
        padding: 0;
        margin: 0;
    }
    .top-menu-view .el-link {
        vertical-align: top;
    }
    .form-title {
        line-height: 40px;
    }
    .row-view {
        margin: 20px 0;
    }
</style>
</html>